<script setup lang='ts'>
import router from "@/router/index"
import pinia from "@/store/index"
import useUserStore from "@/store/modules/user"
let userStore = useUserStore(pinia)
let welcome = '👏🏻'
function loginOut() {
    localStorage.removeItem('token')
    router.push('/login')
    userStore.$state.token = ''
}
</script>
 
<template>
    <div class="headerBox">
        <div class="left">
            {{ welcome }} admin，欢迎回来~
        </div>
        <div class="right">
            <!-- <el-dropdown>
                <span class="el-dropdown-link">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                        <el-dropdown-item> 用户信息</el-dropdown-item>
                        <el-dropdown-item>系统管理</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->



            <el-dropdown @command="loginOut">
                <img src="@/assets/images/admin.png" class="userImg" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                        <el-dropdown-item> 用户信息</el-dropdown-item>
                        <el-dropdown-item>系统管理</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
 
<style scoped lang="scss">
.headerBox {
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);

    .left {
        line-height: 60px;
        margin-left: 30px;
        float: left;
    }

    .right {
        width: 60px;
        height: 60px;
        float: right;

        .el-dropdown {
            width: 10px;
            height: 10px;
        }
    }
}

.userPhoto {
    height: 40px;
    width: 40px;
    border-radius: 90px;
    overflow: hidden;
}

::v-deep .el-dropdown__popper {
    inset: 60px auto auto 1108px !important;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.userImg {
    height: 40px;
    width: 40px;
    transform: translateY(20%);
    border-radius: 7px;
    cursor: pointer;
}
</style>